<template>
    <view class="content">
        <!--  -->
        <view class="headerBg">
            <uv-navbar title="美女助教" leftIconColor="#fff" @leftClick="back"
                :titleStyle="'color:#fff;font-size: 38rpx;font-weight:bold'" bgColor="rgba(255,255,255,0)"></uv-navbar>
            <view class="" :style="'height:'+(menuTop+menuHeight)+'px;'"> </view>
            <image style=" width: 100%;position: absolute; left: 0;top: 0;" class="bg"
                src="/static/images/middle/bg.jpg" mode="widthFix"></image>
			
           <view class="goods">
               <view class="goodsName align-center">
                 {{detailData.name}} <text class="tag" v-if="detailData.time_all">{{detailData.time_all}}营业</text>
               </view>
               <view class="tagList align-center justify-start">
                   <text class="" v-for="(i,n) in detailData.label_arr" :key="n">{{i}}</text>
               </view>
               <view class="address justify-between align-start">
                   <text>地址：</text>
                   <view class="clamp2 flex1">
                       {{detailData.address}}
           
                   </view>
                  <image class="mr15 " @click="$utils.dh(detailData.name, detailData.pointlat,detailData.pointlng)"  style="margin-left: 30rpx;" src="/static/images/middle/i8.png" mode="widthFix">
                  </image>
                  <image @click="$utils.call(detailData.mobile)"  src="/static/images/middle/i9.png" mode="widthFix"></image>
               </view>
           </view>
        </view>
  <!--      <view class="storeCate plr15">
            <view class="storeGoods">
                本店明星台球宝贝
            </view>
            <swiper class="swiper" style="height: 440rpx;" circular indicator-active-color="#2CB37B" :indicator-dots="indicatorDots"
                :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item style="" >
                    <view class="justify-between">
                        <image src="" style="width:320rpx;height: 330rpx;border-radius: 13rpx;" mode=""></image>
                        <view class="flex1 justify-between flex-col ml15">
                            <view class="justify-start align-center " >
                                <text style="font-weight: 800;font-size: 36rpx;color: #333;">姓名（星级教练）</text>    
                                <text style="font-weight: bold;font-size: 36rpx;color: #01C588;"> 4.9</text> <uv-icon color="#01C588" size="15" name="star-fill"></uv-icon>
                            </view>
                            <view class="ellipsis">
                                    <text v-for="(i,index) in 3">{{i}}</text>
                            </view>
                            <view class="desc clamp3">
                                擅长：斯诺克、花式九球 简介：2年台球教练经验，简介 简介简介介简介...
                            </view>
                            <view class="justify-between align-center">
                                <view class="meeting">
                                    去约TA
                                </view>
                                <view class="choose">
                                    立即选TA
                                </view>
                            </view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view> -->
        <view class="plr14" style="margin-top: -30rpx;position: relative; background: #fff;border-radius: 30rpx 30rpx 0 0;">
                
            <view class="justify-between bgWhite mt10 dataItem" v-for="(i,n) in userList" :key="n" @click="toUserMain(i)">
                <view class="letImg">
                    <image :src="i.image" style="width:205rpx;height: 205rpx;border-radius: 15rpx;" mode=""></image>
                    <view class="tagStatus">
                        <text class="point"></text>
                          {{i.status==1?"工作中":'空闲' }}
                    </view>
                </view>
                
                <view class="flex1 justify-between flex-col ml15 ">
                    <view class="justify-start align-center " >
                        <text style="font-weight: 800;font-size: 36rpx;color: #333;">{{i.name}}（{{i.type_name}}）</text>    
                        <text style="font-weight: bold;font-size: 36rpx;color: #01C588;"> {{i.eval}}</text> <uv-icon color="#01C588" size="15" name="star-fill"></uv-icon>
                    </view>
                    <view class="ellipsis">
                            <text v-for="(item,index) in label">{{item}}</text>
                    </view>
                    <view class="desc clamp2">
                        {{i.content}}
                    </view>
                   
                </view>
            </view>
            <view class="" v-if="userList.length==0">
                <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
            </view>
            
        </view>
      
       
    </view>
</template>

<script>
    export default {
        data() {
            return {

                chain: false,
                value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                

                categoryId: "",
                menuTop: uni.getStorageSync('menuInfo').menuTop,
                menuHeight: uni.getStorageSync('menuInfo').menuHeight,
              
                windowHeight: uni.getStorageSync('menuInfo').windowHeight,
                height: 0,
                attrData: 0,
                detailData:{},
                userList:[],
                id:"",
                page:1


            }
        },

        onReady() {
            // 模拟接口请求数据

            this.height = (this.windowHeight * 2 - 570) / 2


        },
        onLoad(opt) {
            if(opt.id) this.id =opt.id
            this.getDetail()
            this.getShopAssistant()
            // this.getCate(index)  
            

        },
     
        methods: {
            async getDetail(){
             let  data=await this.$api.getShopDetail({id:this.id})  
             console.log(data)
             this.detailData= data.detail
            },
            async getShopAssistant(){
             let  data=await this.$api.getShopAssistant({shop_id:this.id,page:this.page})  
             console.log(data)
             this.userList=data.list
             
            },
            
            close() {
                this.$refs.popup.close()
            },
            click(e) {
                console.log(e)
            },
          

            toMain(item) {
                /*  uni.navigateTo({
                      url: '/pages/problemMain/index?id=' + item.id
                  }) */
            },
            back() {
                uni.navigateBack()
            },
            change(index) {
                console.log('选项改变：', index)
                this.value = index;
            },
            toUserMain(i){
                uni.navigateTo({
                    url:'/pages/userMain/index?id='+i.id
                })
            }
        }
    }
</script>
<style scoped lang="scss">
    .header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        height: 87rpx;
    }
    .content{
        min-height: 100vh;
        background-color: #fff;
    }
    .item {
        padding: 22rpx 20rpx 22rpx 32rpx;
        font-weight: bold;

        color: #333333;

        image {
            width: 220rpx;
            height: 220rpx;
            border-radius: 15rpx;
            margin-right: 20rpx;
        }

        &-title {
            font-size: 32rpx;
        }

        &-content {

            font-size: 24rpx;
        }

        .choseRule {
            width: 99rpx;
            height: 46rpx;
            background: #FF4345;
            border-radius: 15rpx;
            text-align: center;
            line-height: 46rpx;
            font-size: 26rpx;
            color: #FFFFFF;
        }

    }

    .gap {
        padding: 0 30rpx;
    }

    .swiper {
        image {
            width: 100%;
            height: 300rpx;
        }


    }

   
    .goods {
        position: relative;
        z-index: 9;
        margin: 50rpx 25rpx 0;
        font-size: 24rpx;
        color: #FFFFFF;

        .goodsName {
            font-weight: bold;
            font-size: 34rpx;

        }

        .tag {
            min-width: 121rpx;
            text-align: center;
            height: 33rpx;
            background: #FEAB61;
            border-radius: 3rpx;
            display: inline-block;
            font-size: 22rpx;
            line-height: 33rpx;
            font-weight: 400;
            margin-left: 10rpx;
            box-sizing: border-box;
        }
    }

    .tagList {
        flex-wrap: wrap;
        margin: 14rpx 0 24rpx 0;

        text {
            margin-top: 10rpx;
            display: block;
            min-width: 118rpx;
            box-sizing: border-box;
            padding: 0 27rpx;
            line-height: 40rpx;
            height: 40rpx;
            background: rgba(0, 0, 0, .15);
            border-radius: 3rpx;
            margin-right: 6rpx;
            color: #fff;
            text-align: center;
            font-size: 22rpx;

        }
    }

    .address {
        image {
            width: 52rpx;
        }
    }

    .storeCate {
        background-color: #fff;
        border-radius: 35rpx 35rpx 0 0;
        position: relative;
        margin-top: -30rpx;
    }

    .storeGoods {
        font-weight: bold;
        font-size: 32rpx;
        line-height: 50rpx;
        color: #333333;
        position: relative;
        display: inline-block;
        line-height: 80rpx;
        margin-left:38rpx;
    }

    .storeGoods::before {
       width: 8rpx;
       height: 29rpx;
       background: #01C588;
       border-radius: 4rpx;
        position: absolute;
        clear: both;
        content: '';
        bottom: 0;
        left: -28rpx;
        top: 0;
        margin: auto;
    }
    .ellipsis{
            text{
                padding: 6rpx 13rpx;
                display: inline-block;
                
                
                border: 1px solid #D3D3D3;
                border-radius: 5rpx;
                margin-right: 10rpx;
                font-weight: 400;
                font-size: 24rpx;
                text-align: center;
                color: #888;
            }
                   
    }
    .desc{
        font-size: 23rpx;
        color: #333333;
        line-height: 43rpx;
    }
    .meeting,.choose{
        width: 164rpx;
        height: 52rpx;
        background: #FFFFFF;
        border-radius: 26rpx;
        border: 2rpx solid #2CB37B;
        font-weight: bold;
        font-size: 25rpx;
        color: #2CB37B;
        text-align: center;
        line-height: 52rpx;
    }
    .choose{
        color: #fff;
        background: #2CB37B;
    }
    .dataItem{
        padding: 20rpx;
        border-radius: 20rpx;
        .letImg{
            position: relative;
            width:205rpx;
            height: 205rpx;
            .tagStatus{
                align-items: center;
                display: flex;
                font-weight: 400;
                font-size: 20rpx;
                padding: 6rpx 9rpx 6rpx 15rpx;
                background: rgba(255,255,255,0.8);
                justify-content: center;
                width: auto;
                    display: inline-flex;
                    left: 8rpx;
                    position: absolute;
                    border-radius: 15rpx;
                    bottom: 11rpx;
                    color: #111111;
                .point{
                    width: 8rpx;
                    height: 8rpx;
                    border: 1px solid #FFFFFF;
                    background-color: #25CE87;
                    border-radius: 50%;
                    display: inline-block;
                    margin-right: 4rpx;
                }
            }
        }
    }
</style>
<style>
    .uv-tabs__wrapper__nav {
        justify-content: space-between;
    }
</style>